<template>
	<view class="">
		<view class="Topbg">
			<view class="" style="width: 690rpx;margin:20rpx auto;">
				<u-search placeholder="搜索商品" v-model="keyword" :animation="true" :action-style="{color:'#fff'}"
					@custom="searves" @search="csearchs">
				</u-search>
			</view>

			<u-tabs :list="nav" :is-scroll="true" :current="current" @change="change" active-color="#fff"
				inactive-color="#fff" :bg-color="{background:'transparent'}" name="classifyName"></u-tabs>
		</view>

		<view class="row">
			<view class="lists u-flex" v-for="(item,index) in list" :key="index" @click="detail(item)">
				<view>
					<u-image :src="item.cover" width="260" height="260" ></u-image>
				</view>
				<view class="" style="padding: 20rpx;width:450rpx;">
					<view class="u-line-2" style="font-size: 32rpx;font-weight: bold">
						{{item.goodsName}}
					</view>
					<view class="u-flex u-row-between" style="margin: 20rpx 0;">
						<view style="color: #FF6450;font-size: 36rpx;">拼团价:￥{{item.ptPrice}}</view>
						<view style="text-decoration: line-through;color: #999;">
							￥{{item.linePrice}}
						</view>
					</view>
					<view class="block">
						<view class="">
							<view>{{item.ctNum}}人拼团，{{item.ptNum}}人买商品</view>
							<view class="">
								{{item.ctNum-item.ptNum}}人拿{{item.returnMoney}}金币
							</view>
						</view>

						<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>



		<u-loadmore :status="status" />


	</view>
</template>

<script>
	export default {
		computed: {
			listenChange() {
				var nav = this.nav
				var classCurrent = this.$store.state.classCurrent
				return {
					nav,
					classCurrent
				}
			}
		},
		watch: {
			listenChange(v) {
				if (v.nav.length) {
					this.current = v.classCurrent;
					this.goods_classify_id = this.nav[v.classCurrent].id;
					console.log(this.goods_classify_id)
					this.getGoods()
				}
			}
		},
		data() {
			return {
				nav: [],
				current: 0,
				goods_classify_id: "",
				page: 1,
				status: 'loadmore',
				list: [{
					classifyName: '全部'
				}],
				keyword: "",

			}
		},

		async onLoad() {
			
	this.keyword = '';
			await this.getClassify()
		},
	
		onPullDownRefresh() {
			this.page = 1;
			this.keyword = '';
			this.goods_classify_id = '';
			this.current = 0;
			this.getGoods()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			if (this.status == 'nomore') {

			} else {
				this.getGoods()
			}

		},
		methods: {
			change(index) {
				this.current = index;
				this.page = 1;
				this.goods_classify_id = this.nav[this.current].id;
				this.getGoods()
			},
			detail(item) {

				uni.navigateTo({
					url: "./detail?id=" + item.id
				})
			},
			//搜索
			searves(e) {
				this.page = 1;
				this.getGoods();
				this.keyword = ""

			},
			csearchs() {
				this.page = 1;
				this.getGoods()
				this.keyword = ""

			},
			//分类
			getClassify() {
				return new Promise((resolve, reject) => {
					this.$u.post('/api/index/goodsClassify', {
						type: 1
					}, {}).then(res => {
						this.nav = res.data;
						this.nav.unshift({
							classifyName: '全部',
							id: ''
						})


						resolve(res)
					}).catch(err => {})
				})

			},
			// 获得商品
			getGoods() {
				this.$u.post('/api/index/goods', {
					goods_type: 1,
					goods_classify_id: this.goods_classify_id,
					page: this.page,
					keyword: this.keyword
				}, {}).then(res => {
					var resList = res.data;
					if (this.page == 1) {
						this.list = []
					}
					if (resList.length > 9) {
						this.status = 'loadmore'
						this.page = this.page + 1
					} else {
						this.status = 'nomore'
					}
					this.list = this.list.concat(resList)
					this.loading = false
				}).catch(err => {})
			},


		}
	}
</script>

<style lang="scss">
	.Topbg {
		height: 300rpx;
		background: #628DFF;

		border-radius: 0rpx 0rpx 50% 50%;
		display: inline-block;
		width: 750rpx;

	}

	.row {

		padding: 20rpx;
		flex-wrap: wrap;
		position: relative;
		bottom: 100rpx;
	}

	.lists {
		background: #FFFFFF;
		box-shadow: 0px 4rpx 6rpx rgba(209, 209, 209, 0.26);
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		width: 750rpx;

		.block {
			width: 100%;
			height: 90rpx;
			background: linear-gradient(#FF6450, #FFB850);
			border-radius: 40rpx;
			color: #FFFFFF;
			padding: 20rpx;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between
		}
	}
</style>
